<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue'
import { reactive, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue'
import { registRules } from './hooks/validate'
import { sendUserLoginSms } from '@/api/access'

const { t } = useI18n()

// const emits = defineEmits(['ok'])

// 状态参数
const state = reactive({
  // 验证码重试倒计时
  smsRetryTimes: 0,
  // 验证码发送状态
  isSmsSending: false,
  // 提交状态
  isSubmit: false,
})

// 表单参数
const formData = ref<RegistForm>({
  phone: '',
  password: '',
  email: '',
  code: '',
})

// 定义组件
const formRef = ref<FormInstance>()

// 发送验证码
const sendSmsCode = () => {
  if (state.smsRetryTimes > 0) {
    return
  }
  formRef.value
    .validateFields(['phone'])
    .then(async () => {
      state.isSmsSending = true
      try {
        state.smsRetryTimes = 60

        const timer = setInterval(() => {
          if (state.smsRetryTimes > 0) {
            state.smsRetryTimes--
          } else {
            clearInterval(timer)
          }
        }, 1000)
        await sendUserLoginSms({
          phone: formData.value.phone,
        })
        message.success(t('account.sms.successTips'))
      } catch (e) {
        message.error(e.message)
      } finally {
        state.isSmsSending = false
      }
    })
    .catch(() => {})
}

// 注册
const handleRegist = () => {
  formRef.value
    .validate()
    .then(() => {
      // 模拟注册
      // state.isSubmit = true
      // emits('ok', formData.value)
      message.error(t('account.error.registerNotImplemented'))
    })
    .catch(() => {
      message.error(t('account.validation.incomplete'))
    })
}

onMounted(() => {
  state.isSubmit = false
})
</script>

<template>
  <a-form ref="formRef" :model="formData" :rules="registRules" layout="vertical">
    <a-form-item :label="t('account.fields.phone')" name="phone">
      <a-input
        v-model:value="formData.phone"
        prefix="+86"
        :placeholder="t('account.validation.phoneRequired')"
        autocomplete="false"
      ></a-input>
    </a-form-item>
    <a-form-item :label="t('account.fields.verificationCode')" name="code">
      <div class="code">
        <a-input
          v-model:value="formData.code"
          :placeholder="t('account.validation.codeRequired')"
          autocomplete="false"
        ></a-input>
        <a-button
          class="w-[100px]"
          type="default"
          :disabled="state.smsRetryTimes > 0"
          @click="sendSmsCode"
        >
          {{
            state.smsRetryTimes > 0
              ? t('account.sms.sendCooldown', { secound: state.smsRetryTimes })
              : t('account.sms.sendButton')
          }}
        </a-button>
      </div>
    </a-form-item>
    <a-form-item :label="t('account.fields.email')" name="email">
      <a-input
        v-model:value="formData.email"
        :placeholder="t('account.validation.emailRequired')"
        autocomplete="false"
      ></a-input>
    </a-form-item>
    <a-form-item :label="t('account.fields.password')" name="password">
      <a-input-password
        v-model:value="formData.password"
        :placeholder="t('account.validation.passwordRequired')"
        autocomplete="false"
      ></a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" size="large" :loading="state.isSubmit" block @click="handleRegist">
        {{ t('account.login.registerText') }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<style lang="scss" scoped>
.code {
  display: flex;

  .ant-btn {
    margin-left: 15px;
  }
}
</style>
